import Taro, { Component } from '@tarojs/taro'
import { View, Text, Image, Picker, Swiper, SwiperItem } from '@tarojs/components'
import {AtTag,AtButton,AtIcon} from 'taro-ui'
import './suifangjihuaxiangqing.scss'
import reactMixin from 'react-mixin';
import myJs from './suifangjihuaxiangqingJs.js'
import app from '../../../../main.js'

export default class Suifangjihuaxiangqing extends Component {
    config = {
        navigationBarTitleText: '随访计划详情'
    }
    constructor () { 
        super(...arguments); 
        this.state = this.getData(); 
    }

    init(){
        this.getPlan();
    }

    go(url){
        app.navigateTo(url);
    }

    render () {
        return (
            <View className='suifangjihuaxiangqing'>
                <View className='patient' onClick={this.go.bind(this, '../patientdetails/patientdetails?id='+this.state.patient.id)}>
                    <Image 
                        className='head' 
                        src={app.getPath(this.state.patient.head_image)}
                    >
                    </Image>
                    <View className='info'>
                        <View className='top'>
                            {this.state.patient.name}
                            <Text className='more-info'>{this.state.patient.gender} {this.state.patient.age}岁</Text>
                        </View>
                        <View className='bottom'>
                            {
                                this.state.patient.labels.map((item) => {
                                    return <AtTag className='tag'>{item}</AtTag>
                                })
                            }
                        </View>
                    </View>
                    <AtIcon className='icon' value='chevron-right' size='30' color='#cdcdcd'></AtIcon>
                </View>
                <View className=' class_1'>
                    <Text className=' class_2'>{this.state.plan.title}</Text>
                </View>
                <View className=' class_3'>
                    <View className=' class_4'>
                        <Text className=' class_5'>随访计划开始时间</Text>
                        <Text className=' class_6'>{this.state.plan.start_date}</Text>
                    </View>
                    <View className=' class_7'></View>
                    <View className=' class_8'>
                        {
                            this.state.plan.items.map((item, index) => {
                                return (
                                    <View>
                                        <View className=' class_9'>
                                            <Image className=' class_10' src={item.status == '已发送' ? app.imageUri+'img/shijiangray.png' : app.imageUri+'img/shijian.png'}></Image>
                                            <View className='class_11_3'>{this.state.plan.date_type}后</View>
                                            <Text className={(item.status == '已发送') ? 'class_11_1':'class_11_2'}>{this.state.plan.start_date}后{item.amount}天（{item.start_time}）{item.status}</Text>
                                        </View>
                                        {
                                            item.content.map((one) => {
                                                return (
                                                    <View className=' class_12'>
                                                        <View className=' class_13'>
                                                            <View className={item.status == '已发送' ? 'class_14' : 'class_24'}>
                                                                <View className={item.status == '已发送' ? 'class_15' : 'class_25'}></View>
                                                                <Image className=' class_16' src={item.status == '已发送' ? app.imageUri+'img/gray.png' : app.imageUri+'img/green.png'}></Image>
                                                            </View>
                                                        </View>
                                                        {
                                                            one.type == '患教资料' || one.type == '随访表单' ?
                                                            (
                                                                <View className=' class_17'>
                                                                    <Text className={(item.status == '已发送') ? 'class_11_1 ':'class_11_2 '}>{one.type}：</Text>
                                                                    <Text className={(item.status == '已发送') ? 'class_11_1 border_btm':'class_11_2 border_btm'}  onClick={this.navigateTo.bind(this, '../aiyanPolularVideo/aiyanPolularVideo?kepuid='+one.relate_id)}>{one.content}</Text>
                                                                </View>
                                                            ) :
                                                            (
                                                                <View className=' class_17'>
                                                                    <Text className={(item.status == '已发送') ? 'class_11_1 ':'class_11_2 '}>{one.type}：</Text>
                                                                    <Text className={(item.status == '已发送') ? 'class_11_1 ':'class_11_2 '}>{one.content}</Text>
                                                                </View>
                                                            )
                                                        }
                                                    </View>
                                                )
                                            })
                                        }
                                    </View>
                                )
                            })
                        }
                    </View>
                </View>
                <View className='blank-box'></View>
                <View className='at-row btn-box'>
                    <View className='at-col at-col-6'>
                        <AtButton type='primary' full={true} className='cancel-btn' onClick={this.cancelPlan.bind(this)}>取消计划</AtButton> 
                    </View>
                    <View className='at-col at-col-6'>
                        <AtButton type='primary' full={true} className='update-btn' onClick={this.navigateTo.bind(this, '../editsuifangfangan/editsuifangfangan?id='+this.state.plan.id+'&defaultId=5')}>修改计划</AtButton> 
                    </View>
                </View>
            </View>
        );
    }
}
reactMixin.onClass(Suifangjihuaxiangqing,myJs);